<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <!--<script src="../static/editor.md-master/editor.md-master/editormd.amd.min.js"></script>-->
        <script src="editormd.min.js"></script>
        <link rel="stylesheet" href="../../layui/css/layui.css">
        <link rel="stylesheet" href="lib/codemirror/codemirror.min.css">
        <link rel="stylesheet" href="css/editormd.css">
        <style>
            #submit_button{
                display:block;
                margin-left: 42%;
                margin-top: 2em;
                margin-bottom: 2em;
            }
            .input{
                display: block;
                margin-left: 20%;
            }
            .layui-input-block{
                line-height: 43px;
            }
            .margin{
                margin-top: 10px;
            }
        </style>
    </head>

    <body class="layui-layout-body">
        <div class="layui-layout layui-layout-admin">
            <div class="layui-header">
                <div class="layui-logo">绿色星球后台管理系统</div>
            </div>

            <div class="layui-side layui-bg-black">
                <div class="layui-side-scroll">
                    <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                    <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                        <li class="layui-nav-item"><a href="../test.html">新闻上传</a></li>
                    </ul>
                </div>
            </div>

            <div class="layui-body " id="content" style="padding: 15px;">
                <!-- 内容主体区域 -->
                <div class="layui-form-item">
                <label class="layui-form-label">新闻标题</label>
                <div class="layui-input-block layui-col-md4 margin0">
                    <input type="text" name="newsName" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" id="title">
                </div>

            </div>
                <div class="layui-form-item layui-form">
                <label class="layui-form-label">新闻类型</label>
                 <div class="layui-inline layui-input-block">
                <select name="city" lay-verify="required" >
                  <option value="独家">独家</option>
                  <option value="政策">政策</option>
                   <option value="企业">企业</option>
                  <option value="市场">市场</option>
                </select>
            </div>
             <div class="layui-form-item margin">
                <label class="layui-form-label">小标题类型</label>
                <div class="layui-input-block layui-col-md4 margin0">
                    <input type="text" name="newsName" required  lay-verify="required" placeholder="请输入小标题" autocomplete="off" class="layui-input" id="smallTitle">
                </div>
            </div>
                    <div id="layout">
                    <div id="my-editormd" >
                         <textarea id="my-editormd-markdown-doc" name="my-editormd-markdown-doc" style="display:none;"></textarea>
                        <!-- 注意：name属性的值-->
                        <textarea id="my-editormd-html-code" name="my-editormd-html-code" style="display:none;"></textarea>
                    </div>
                    <!--<div id="doc-content">-->
                        <!--<textarea style="display:none;">${message.detail}</textarea>-->
                    <!--</div>-->
                    <button class="button button-block button-rounded button-action layui-btn" id="submit_button">上传文章</button>

                </div>
            </div>

            <div class="layui-footer">
                <!-- 底部固定区域 -->
                © 绿色星球
            </div>
        </div>
        </div>
        <script src="../../layui/layui.js"></script>
        <script src="../../../jquery/jquery-3.3.1.min.js"></script>
        <script src="./lib/flowchart.min.js"></script>
        <script src="./lib/jquery.flowchart.min.js"></script>
        <script src="./lib/marked.min.js"></script>
        <script src="./lib/prettify.min.js"></script>
        <script src="./lib/raphael.min.js"></script>
        <!--<script src="./lib/sequence-diagram.min.js"></script>-->
        <script src="./lib/underscore.min.js"></script>
        <script type="text/javascript">
            // var testEditor;
            // $(function () {
            //     testEditor = editormd.markdownToHTML("doc-content", {//注意：这里是上面DIV的id
            //         htmlDecode: "style,script,iframe",
            //         emoji: true,
            //         taskList: true,
            //         tex: true, // 默认不解析
            //         flowChart: true, // 默认不解析
            //         sequenceDiagram: true, // 默认不解析
            //         codeFold: true,
            //     });});

             layui.use(['layer','jquery','form','element','util'], function(){

             })

            $(function() {
                testEditor = editormd("my-editormd", {
                    width   : "94%",
                    height  : 700,
                    syncScrolling : "single",
                    path    : "./lib/",
                    theme: "dark",
                    previewTheme: "dark",
                    editorTheme: "pastel-on-dark",
                    markdown: "",
                    codeFold: true,
                    //syncScrolling : false,
                    saveHTMLToTextarea: true,    // 保存 HTML 到 Textarea
                    searchReplace: true,
                    //watch : false,                // 关闭实时预览
                    htmlDecode: "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启
                    //toolbar  : false,             //关闭工具栏
                    //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
                    emoji: true,
                    taskList: true,
                    tocm: true,         // Using [TOCM]
                    tex: true,                   // 开启科学公式TeX语言支持，默认关闭
                    imageUpload: true,
                    imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                    // imageUploadURL: "http://106.13.113.4:8080/GreenTTT/file/uploadOne",//后端数据
                    toolbarAutoFixed:true,//工具栏自动固定定位的开启与禁用
                    imageUploadURL: "http://localhost/GreenNew/file/uploadOne",//后端数据
                    crossDomainUpload : true
                })
            });
            // <!--然后用ajax将编辑器中的md格式的数据提交到后台，存储在数据库中，有的人可能存储的是html格式的，也行，这个看你自己的选择了，不过存储.md格式还是要好一点-->
            $("#submit_button").click(function () {
                if(testEditor.getHTML()==""||$("#title").val()==""||$("#smallTitle").val()==""){
                    return false;
                }
                $.ajax({
                    type: "post",
                    url:'http://106.13.113.4:8080/GreenTTT/news/addNews',
                    data:{
                      newsName:$("#title").val(),
                      newsType:$(".layui-this")[0].innerHTML,
                      newsContent:testEditor.getHTML(),
                      newsLittletype:$("#smallTitle").val()
                    },
                    success: function (data)
                    {
                         console.log(testEditor.getHTML());
                        alert("成功");
                    },
                    error:function (xhr) {

                    }
                });
            });
        </script>
    </body>
</html>